<template>
  <view class="content-box">
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="意见反馈"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="title-name">反馈类型</view>
    <view class="tip-content">请选择需要反馈的问题类型哦，感谢你的反馈！</view>
    <view class="type-box">
      <view
        class="type-item"
        v-for="(item, index) in kindList"
        @click="selectType(index)"
        :key="index"
      >
        <view>{{ item.kind }}</view>
        <view class="iconfont icon-select" v-if="item.isSelected"></view>
      </view>
    </view>
    <view class="title-name">问题/意见描述</view>
    <view class="tip-box">
      <u-input
        v-model="suggestion"
        maxlength="300"
        placeholder-style="font-weight:normal;"
        placeholder="请输入10个字以上的问题描述,方便我们更好的帮助您解决问题(最多输入300个字哦~)"
        type="textarea"
        height="100"
        auto-height="true"
      />
      <view>
        <u-upload
          :action="action"
          upload-text=" "
          width="150"
          height="150"
          max-count="3"
          ref="uploader"
          multiple
          :before-upload="beforeUpload"
          @on-success="uploadSuccess"
          @on-uploaded="postSujestion"
          :auto-upload="false"
        ></u-upload>
      </view>
    </view>
    <view class="title-name">联系方式（选填）</view>
    <view class="tip-box">
      <u-input
        v-model="contact"
        placeholder-style="font-weight:normal;flex-wrap:wrap;width:100%"
        placeholder="请输入您的联系方式(可不填~),如需填写联系方式推荐格式: qq:*****或者weixin:*****"
        type="textarea"
      />
    </view>
    <view class="btn-box">
      <view class="submit-btn">
        <u-button @click="uploadImages" type="success" shape="square"
          >提交反馈</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      kindList: [
        {
          kind: '功能异常',
          isSelected: true,
        },
        {
          kind: '产品建议',
          isSelected: false,
        },
        {
          kind: '体验优化',
          isSelected: false,
        },
        {
          kind: '其它',
          isSelected: false,
        },
      ],
      suggestion: '',
      action: app.globalData.baseUrl + '/image/upload',
      contact: '',
      tmp_name: [], //图片临时路径
      imgList: [],
      typeIndex: 0,
    };
  },
  methods: {
    beforeUpload(index, list) {
      this.tmp_name = list[0].file.path;
    },
    uploadImages() {
      if (this.suggestion.length < 10) {
        app.showToast('您的建议说明太短了哦~');
        return;
      }
      this.$refs.uploader.upload();
    },
    selectType(index) {
      this.typeIndex = index;
      for (let i = 0; i < this.kindList.length; i++) {
        if (i == index) this.kindList[index].isSelected = true;
        else this.kindList[i].isSelected = false;
      }
    },
    uploadSuccess: function (data, index, lists, name) {
      if (!data.code) {
        this.imgList.push(data.image_url);
      } else {
        app.showToast(res.data.msg, 'success');
      }
    },
    postSujestion() {
      uni.request({
        url: app.globalData.baseUrl + '/index/callback',
        method: 'POST',
        data: {
          token: app.globalData.token,
          type: this.kindList[this.typeIndex].kind,
          suggestion: this.suggestion,
          imgList: JSON.stringify(this.imgList),
          contact: this.contact,
        },
        success: (res) => {
          if (!res.data.code) {
            app.showToast('感谢您的反馈，关键操作~');
            //数据清空
            this.$refs.uploader.clear();
            this.suggestion = '';
            this.contact = '';
            this.imgList = [];
            this.typeIndex = 0;
            this.selectType(0);
            this.tmp_name = [];
          } else {
            app.showToast(res.data.msg);
          }
        },
        fail: (err) => {
          app.showToast('貌似断网了哟，请联网后重试~');
        },
      });
    },
  },
};
</script>

<style>
.title-name {
  margin: 20rpx 0px;
}

.content-box {
  width: 90%;
  margin: 0px auto;
  font-weight: bold;
  margin: 20rpx auto;
}

.tip-box {
  border: 1px #e2d1d1 solid;
  border-radius: 10px;
  padding: 5px 10px;
}

.tip-content {
  font-size: 24rpx;
  color: #9c9c9c;
  background-color: #f3f3f3;
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 20rpx;
}

.type-box {
  padding-left: 40rpx;
}

.type-item {
  line-height: 90rpx;
  height: 90rpx;
  border-bottom: 1px #e6e6e6 solid;
  display: flex;
  justify-content: space-between;
  padding-right: 60rpx;
}

.btn-box {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
}

.submit-btn {
  width: 60%;
}
</style>
